/* eslint-disable */
<template>
  <div class="main-container">
    <div class="register-container">
      <el-card class="box-card">
        <el-form ref="form" class="form">
          <div class="register-title">注册</div>
          <el-form-item>
            <el-input
              class="register-input"
              placeholder="请输入用户名"
              v-model="username"
              prefix-icon="el-icon-user"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              class="register-input"
              v-model="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请再次密码"
              class="register-input"
              ref="confirmPassword"
              v-model="confirmPassword"
              show-password
            ></el-input>
          </el-form-item>
          <div class="submit-button">
            <el-button @click="register" class="register-button"
              >注册</el-button
            >
            <el-button @click="backToLogin" class="register-button"
              >返回登录</el-button
            >
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { RegisterUser } from '@/api/user';

export default {
  name: 'register',
  data () {
    return {
      image: 'default',
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    backToLogin () {
      this.$router.push("login")
    },
    register () {

      if (this.confirmPassword != this.password) {
        this.$message.error('请确认两次密码输入一致');
      }
      else {
        RegisterUser(this.username, this.password, this.image).then((response) => {

          this.$message({
            message: "注册成功",
            type: "success",
          });
        });
      }

    }

  }
}
</script>


<style scoped>
.main-container {
  background: linear-gradient(to right, #003973 0, #e5e5be 100%);
  height: 100vh;
  width: 100vw;
}
.register-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  text-align: center;
  /* background: linear-gradient(to right, #003973 0, #e5e5be 100%); */
}
.register-input {
  width: 300px;
}
.register-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 26px;
  font-family: Palatino, Garamond, Times, Georgia, serif;
}
</style>
